
  <h1 class="center sp-28" [@enter1]="{ value: '', params: { delay: 0 } }">
    动态参数
  </h1>

  <form nz-form nzLayout="vertical" class="center" [@enter1]="{ value: '', params: { delay: 0 } }" #f="ngForm">
    <nz-form-item  >
      <nz-form-label nzRequired  nzFor="duration">过度时间（ms）</nz-form-label>
      <nz-form-control >
        <nz-input-number id="duration" name="duration" [(ngModel)]="duration" [nzMin]="1" [nzStep]="1"></nz-input-number>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item  >
      <nz-form-label nzRequired  nzFor="delay">延迟时间（ms）</nz-form-label>
      <nz-form-control >
        <nz-input-number id="delay" name="delay" [(ngModel)]="delay" [nzMin]="1" [nzStep]="1"></nz-input-number>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item *ngIf="animation === 'pulse'"  >
      <nz-form-label nzRequired  nzFor="scale">放大缩小倍数</nz-form-label>
      <nz-form-control >
        <nz-input-number id="scale" name="scale" [(ngModel)]="scale" [nzMin]="0" [nzStep]="0.01"></nz-input-number>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="[
          'shake',
          'bounceInDown',
          'bounceInUp',
          'bounceInLeft',
          'bounceInRight',
          'bounceOutDown',
          'bounceOutUp',
          'bounceOutLeft',
          'bounceOutRight',
          'fadeInDownBig',
          'fadeInUpBig',
          'fadeInLeftBig',
          'fadeInRightBig',
          'fadeInDown',
          'fadeInUp',
          'fadeInLeft',
          'fadeInRight',
          'fadeOutDownBig',
          'fadeOutUpBig',
          'fadeOutLeftBig',
          'fadeOutRightBig',
          'fadeOutDown',
          'fadeOutUp',
          'fadeOutLeft',
          'fadeOutRight',
          'lightSpeedIn',
          'lightSpeedOut',
          'slideInUp',
          'slideInDown',
          'slideInLeft',
          'slideInRight',
          'slideOutUp',
          'slideOutDown',
          'slideOutLeft',
          'slideOutRight',
          'rollIn',
          'rollOut'
        ].includes(animation)"  >
      <nz-form-label nzRequired  nzFor="delay">Translate (px, %, rem, em, vw, vh):</nz-form-label>
      <nz-form-control >
        <input nz-input  id="translate" name="translate" [(ngModel)]="translate" pattern="-?([0-9])?\.?[0-9]+(px|%|rem|em|vw|vh|vmin|vmax)">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item  *ngIf="
        [
          'flipInX',
          'flipInY',
          'flipOutX',
          'flipOutY',
          'rotateIn',
          'rotateInDownLeft',
          'rotateInDownRight',
          'rotateInUpLeft',
          'rotateInUpRight',
          'rotateOut',
          'rotateOutDownLeft',
          'rotateOutDownRight',
          'rotateOutUpLeft',
          'rotateOutUpRight',
          'rollIn',
          'rollOut',
          'rotate'
        ].includes(animation)
      "  >
      <nz-form-label nzRequired  nzFor="degrees">旋转度数</nz-form-label>
      <nz-form-control >
        <nz-input-number id="degrees" name="degrees" [(ngModel)]="degrees" [nzMin]="0" [nzStep]="0.01"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
  </form>

  <div [ngSwitch]="animation" [@enter2] class="center">
    <div class="center">
      <!-- Attention seekers -->
      <app-angular-img
        *ngSwitchCase="'bounce'"
        [@bounce]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'flash'"
        [@flash]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'pulse'"
        [@pulse]="{ value: animationState, params: { duration: duration, delay: delay, scale: scale } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rubberBand'"
        [@rubberBand]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'shake'"
        [@shake]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'swing'"
        [@swing]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'tada'"
        [@tada]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'wobble'"
        [@wobble]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'jello'"
        [@jello]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <!-- Bouncing entrances -->
      <app-angular-img
        *ngSwitchCase="'bounceIn'"
        [@bounceIn]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceInDown'"
        [@bounceInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceInLeft'"
        [@bounceInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceInRight'"
        [@bounceInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceInUp'"
        [@bounceInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Bouncing exits -->
      <app-angular-img
        *ngSwitchCase="'bounceOut'"
        [@bounceOut]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceOutDown'"
        [@bounceOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceOutLeft'"
        [@bounceOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceOutRight'"
        [@bounceOutRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'bounceOutUp'"
        [@bounceOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Fading entrances -->
      <app-angular-img
        *ngSwitchCase="'fadeIn'"
        [@fadeIn]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInDown'"
        [@fadeInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInDownBig'"
        [@fadeInDownBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInLeft'"
        [@fadeInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInLeftBig'"
        [@fadeInLeftBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInRight'"
        [@fadeInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInRightBig'"
        [@fadeInRightBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInUp'"
        [@fadeInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeInUpBig'"
        [@fadeInUpBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Fading exits -->
      <app-angular-img
        *ngSwitchCase="'fadeOut'"
        [@fadeOut]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutDown'"
        [@fadeOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutDownBig'"
        [@fadeOutDownBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutLeft'"
        [@fadeOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutLeftBig'"
        [@fadeOutLeftBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutRight'"
        [@fadeOutRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutRightBig'"
        [@fadeOutRightBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutUp'"
        [@fadeOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'fadeOutUpBig'"
        [@fadeOutUpBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Flippers -->
      <app-angular-img
        *ngSwitchCase="'flip'"
        [@flip]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'flipInX'"
        [@flipInX]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'flipInY'"
        [@flipInY]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'flipOutX'"
        [@flipOutX]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'flipOutY'"
        [@flipOutY]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <!-- Light speed -->
      <app-angular-img
        *ngSwitchCase="'lightSpeedIn'"
        [@lightSpeedIn]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'lightSpeedOut'"
        [@lightSpeedOut]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Rotating entrances -->
      <app-angular-img
        *ngSwitchCase="'rotateIn'"
        [@rotateIn]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateInDownLeft'"
        [@rotateInDownLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateInDownRight'"
        [@rotateInDownRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateInUpLeft'"
        [@rotateInUpLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateInUpRight'"
        [@rotateInUpRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <!--Rotating exits  -->
      <app-angular-img
        *ngSwitchCase="'rotateOut'"
        [@rotateOut]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateOutDownLeft'"
        [@rotateOutDownLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateOutDownRight'"
        [@rotateOutDownRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateOutUpLeft'"
        [@rotateOutUpLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotateOutUpRight'"
        [@rotateOutUpRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <!-- Sliding entrances -->
      <app-angular-img
        *ngSwitchCase="'slideInUp'"
        [@slideInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideInDown'"
        [@slideInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideInLeft'"
        [@slideInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideInRight'"
        [@slideInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <!-- Sliding exits -->
      <app-angular-img
        *ngSwitchCase="'slideOutUp'"
        [@slideOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideOutDown'"
        [@slideOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideOutLeft'"
        [@slideOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'slideOutRight'"
        [@slideOutRight]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <!-- Zooming entrances -->
      <app-angular-img
        *ngSwitchCase="'zoomIn'"
        [@zoomIn]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomInDown'"
        [@zoomInDown]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomInLeft'"
        [@zoomInLeft]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomInRight'"
        [@zoomInRight]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomInUp'"
        [@zoomInUp]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <!-- Zooming exits -->
      <app-angular-img
        *ngSwitchCase="'zoomOut'"
        [@zoomOut]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomOutDown'"
        [@zoomOutDown]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomOutLeft'"
        [@zoomOutLeft]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomOutRight'"
        [@zoomOutRight]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'zoomOutUp'"
        [@zoomOutUp]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <!-- Specials -->
      <app-angular-img
        *ngSwitchCase="'hinge'"
        [@hinge]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'jackInTheBox'"
        [@jackInTheBox]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rollIn'"
        [@rollIn]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rollOut'"
        [@rollOut]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate } }"
      ></app-angular-img>
      <!-- Other -->
      <app-angular-img
        *ngSwitchCase="'collapse'"
        [@collapse]="{ value: animationWithState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'collapseHorizontally'"
        [@collapseHorizontally]="{ value: animationWithState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'rotate'"
        [@rotate]="{ value: animationWithState, params: { duration: duration, delay: delay, degrees: degrees } }"
      ></app-angular-img>
      <app-angular-img
        *ngSwitchCase="'hueRotate'"
        [@hueRotate]="{ value: animationState, params: { duration: duration, delay: delay } }"
      ></app-angular-img>
    </div>

    <div *ngSwitchDefault>选择动画</div>
  </div>

  <div [@enter3]="{ value: '', params: { delay: 1200, duration: 1000 } }" class="center">
    <nz-select class="m-r-8" style="width:200px" [(ngModel)]="animation"  (ngModelChange)="animationChanged()" nzAllowClear nzPlaceHolder="Choose" nzShowSearch>
      <nz-option-group *ngFor="let option of options"  [nzLabel]="option.label">
        <nz-option *ngFor="let animation of option.animations" [nzValue]="animation" [nzLabel]="animation"></nz-option>
      </nz-option-group>
    </nz-select>


    <button nz-button nzType="default"
            [disabled]="f.invalid"
            (click)="animate()">点击骚动起来</button>
  </div>

